<!DOCTYPE html>
<html>
<head>
<title>AngularJS: UI-Router Quick Start</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<link href="lib/bootstrap.min.css" rel="stylesheet">
<script src="lib/angular-ui-router.js"></script>
<link href="custom-marker.css"  rel="stylesheet" />
<script>
  var myapp = angular.module('myapp', ['ngMap',"ui.router"])
  myapp.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/foo")
    $stateProvider
      .state('foo', { url: "/foo", templateUrl: "foo.html", controller: 'fooCtrl' })
      .state('bar', { url: "/bar", templateUrl: "bar.html", controller: 'barCtrl' })
      .state('baz', { url: "/baz", templateUrl: "baz.html" })
  });
  myapp.controller('fooCtrl', function($scope, NgMap){
    NgMap.getMap('foomap').then(function(map) {
      console.log('NgMap.getMap in fooCtrl', map);
    });
    $scope.onClick = function() {
      alert('map clicked');
    }
  });
  myapp.controller('barCtrl', function(NgMap){
    NgMap.getMap('barmap').then(function(map) {
      console.log('NgMap.getMap in barCtrl', map);
    });
  });
</script>

<style>ng-map {vertical-align:top; height:300px; width:30%; display:inline-block !important; padding: 10px}</style>
</head>

<body ng-app="myapp" class="container">

  <script type="text/ng-template" id="foo.html">
    <div class="row">
      <ng-map id="foomap" style="height:300px;"
        on-click="onClick()" center="[40.74, -74.18]" zoom="4">
        <marker position="40.74, -74.18"></marker>
        <custom-control position="TOP_CENTER">
          <input placeholder="Search" />
        </custom-control>
      </ng-map>
      <ng-map id="one" center="[41.74, -75.18]" zoom="8" style="height:400px;" trigger-resize>
        <custom-marker id="can" position="41.74, -75.18">
          <div class="allen">I am a custom marker</div>
        </custom-marker>
      </ng-map>
      <ng-map id="two" center="[42.74, -76.18]" zoom="12" style="height:500px;">
        <marker position="42.74, -76.18"></marker>
      </ng-map>
    </div>
  </script>

  <script type="text/ng-template" id="bar.html">
    <ng-map id="barmap" center="[40.74, -74.18]" zoom="12"
      style="height:400px;">
      <marker position="40.74, -74.18"></marker>
      <drawing-manager
        drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','marker']}"
        drawingControl="true"
        drawingMode="null">
      </drawing-manager>
    </ng-map>

    <ng-map id="one" center="[41.74, -75.18]" zoom="4" style="height:500px">
      <marker position="41.74, -75.18"></marker>
    </ng-map>

    <ng-map id="two" center="[42.74, -76.18]" zoom="8" style="height:300px">
      <marker position="42.74, -76.18"></marker>
    </ng-map>
  </script>

  <script type="text/ng-template" id="baz.html">
    <h1>No Map</h1>
  </script>

  <div class="navbar">
    <div class="navbar-inner">
      <ul class="nav">
        <li><a ui-sref="foo">Page 1</a></li>
        <li><a ui-sref="bar">Page 2</a></li>
        <li><a ui-sref="baz">No Map</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>
    </div>
  </div>
</body>
</html>
